<template>
  <div class="canvas-container">
    <canvas
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="stopDrawing"
    ></canvas>
    <div class="controls">
      <button @click="clearCanvas">清除画布</button>
      <div class="color-picker">
        <span>颜色: </span>
        <input type="color" v-model="drawColor">
      </div>
      <div class="brush-size">
        <span>笔刷大小: </span>
        <input type="range" v-model="brushSize" min="1" max="50">
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'CanvasDrawing',
  setup() {
    const canvas = ref(null);
    const isDrawing = ref(false);
    const drawColor = ref('#000000');
    const brushSize = ref(5);

    let ctx = null;

    onMounted(() => {
      // 初始化画布
      ctx = canvas.value.getContext('2d');
      resizeCanvas();

      // 监听窗口大小变化
      window.addEventListener('resize', resizeCanvas);
    });

    function resizeCanvas() {
      const container = canvas.value.parentElement;
      canvas.value.width = container.clientWidth;
      canvas.value.height = container.clientHeight;

      // 设置画布样式
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
    }

    function startDrawing(e) {
      isDrawing.value = true;
      draw(e);
    }

    function draw(e) {
      if (!isDrawing.value) return;

      // 获取鼠标/触摸位置
      const rect = canvas.value.getBoundingClientRect();
      let clientX, clientY;

      if (e.type.includes('touch')) {
        clientX = e.touches[0].clientX;
        clientY = e.touches[0].clientY;
      } else {
        clientX = e.clientX;
        clientY = e.clientY;
      }

      const x = clientX - rect.left;
      const y = clientY - rect.top;

      // 设置绘图样式
      ctx.strokeStyle = drawColor.value;
      ctx.lineWidth = brushSize.value;

      // 绘制线条
      ctx.lineTo(x, y);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(x, y);
    }

    function stopDrawing() {
      isDrawing.value = false;
      ctx.beginPath();
    }

    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
    }

    return {
      canvas,
      startDrawing,
      draw,
      stopDrawing,
      clearCanvas,
      drawColor,
      brushSize
    };
  }
};
</script>

<style scoped>
.canvas-container {
  width: 100%;
  height: 80vh;
  position: relative;
}

canvas {
  border: 1px solid #ccc;
  background-color: white;
  width: 100%;
  height: 100%;
  touch-action: none; /* 防止触摸时页面滚动 */
}

.controls {
  margin-top: 10px;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

.color-picker, .brush-size {
  display: flex;
  align-items: center;
  gap: 5px;
}

input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
}

input[type="range"] {
  width: 100px;
}
</style>
